<template>
  <el-dialog :title="title" :visible="dialogTableVisible" @close="close" width="800px" >
    <el-form label-width="100px" size="small" style="width: 500px;" class="center" :model="formData" :rules="formRule" ref="form">
      <el-form-item label="部门名称" prop="name">
        <el-input placeholder="2-10个字符" v-model="formData.name" ></el-input>
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input placeholder="2-10个字符" v-model="formData.code" ></el-input>
      </el-form-item>
      <el-form-item label="部门负责人" prop="managerId">
          <el-select placeholder="请选择负责人" v-model="formData.managerId" style="width: 400px;" >
            <el-option :label="item.username" :value="item.id" v-for="item in manger" :key="item.id"></el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="部门介绍" prop="introduce">
        <el-input
          type="textarea"
          :rows="4"
          placeholder="1-100个字符"
          v-model="formData.introduce">
        </el-input>
      </el-form-item>
      <el-form-item style="position: relative; left: 50%;transform: translateX(-30%);">
        <el-button type="primary" @click="submit">确认</el-button>
        <el-button @click="close">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
import {getDepartmentManager,addDepartment,updateDepartment,getDepartmentList} from '@/api/department'
export default {
  props:{
    title:'',
    dialogTableVisible:{
      type:Boolean,
      default:false
    },
    items:{
      type:Object,
      default:{}
    }
  },
  data() {
    return {
      formData:{
        name:'',
        code:'',
        managerId:'',
        introduce:'',
        pid:''
      },
      formRule:{
        name:[
        { required: true, message: '部门名称不能为空', trigger: 'blur' },
        { min: 2, max: 10, message: '部门名称长度在 2 到 10 个字符', trigger: 'blur' },
        {validator:async (rule,value,callback)=>{
          const result=await getDepartmentList()
          if(result.some(item=>item.name==value)&&this.title=='新增部门') {
            return callback(new Error('部门名重复了'))
          }
          else {
            callback()
          }
        },trigger:'blur'}
        ],
        code:[
        { required: true, message: '部门编号不能为空', trigger: 'blur' },
        { min: 2, max: 10, message: '部门编码长度在 2 到 10 个字符', trigger: 'blur' },
        {validator:async (rule,value,callback)=>{
          const result=await getDepartmentList()
          if(result.some(item=>item.code==value)&&this.title=='新增部门') {
            return callback(new Error('部门编号重复了'))
          }
          else {
            callback()
          }
        },trigger:'blur'}
        ],
        managerId:[
        { required: true, message: '部门负责人不能为空', trigger: 'blur' },
        ],
        introduce:[
        { required: true, message: '部门负责人不能为空', trigger: 'blur' },
        { min: 1, max: 100, message: '部门介绍长度在 1 到 100 个字符', trigger: 'blur' }
        ]
      },
      manger:[]
    }
  },
  methods:{
    async close() {
      this.$emit('update:dialogTableVisible',false)
      this.$nextTick(async ()=>{
        await this.$refs.form.resetFields()
      })
    },
    async submit() {
      await this.$refs.form.validate()
      if(this.title=='新增部门') {
        this.formData.pid=this.items.id
        await addDepartment(this.formData)
        this.$message({
          message: '添加成功',
          type: 'success'
        });
      }
      else {
        await updateDepartment(this.formData.id,this.formData)
        this.$message({
          message: '编辑成功',
          type: 'success'
        });
      }
      this.$emit('update:dialogTableVisible',false)
      this.$emit('department')
    }
  },
  async created() {
    const result=await getDepartmentManager()
    this.manger=result
  },
  watch:{
    items() {
      if(this.title=='新增部门') {
        this.formData={
        name:'',
        code:'',
        managerId:'',
        introduce:'',
        pid:''
      }}
      else {
      this.formData=this.items
    }
    }
  }
}
</script>

<style scoped>
.center {
  margin-left: 50px;
}
</style>